<template>
    <div class="main refund-list">
        <section>
            <search-form :listQuery="listQuery" :queryConfig="queryConfig" :search="search"/>
            <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
                <el-table-column align="center" label="序号" type="index" fixed :index="(index)=>{return indexMethod(index, listQuery)}" width="80">
                </el-table-column>
                <el-table-column align="center" label="退单号" width="200">
                    <template slot-scope="scope">
                        <span>{{scope.row.returnOrderSn}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="订单号" width="200">
                    <template slot-scope="scope">
                        <span>{{scope.row.dealCode}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="商品名称">
                    <template slot-scope="scope">
                        <span>{{scope.row.goodsName}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="颜色" width="90">
                    <template slot-scope="scope">
                        <span>{{scope.row.colorName}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="尺寸" width="90">
                    <template slot-scope="scope">
                        <span>{{scope.row.sizeName}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="单价" width="90">
                    <template slot-scope="scope">
                        <span>{{scope.row.goodsPrice}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="数量" width="90">
                    <template slot-scope="scope">
                        <span>{{scope.row.goodsNumber}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="金额" width="90">
                    <template slot-scope="scope">
                        <span>{{scope.row.sumPrice||0}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="收货人" width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="手机号" width="110">
                    <template slot-scope="scope">
                        {{scope.row.mobile}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="收货地址" min-width="160">
                    <template slot-scope="scope">
                        <span>{{scope.row.receiverAddr}}</span>
                    </template>
                </el-table-column>
                <!--<el-table-column align="center" label="退单状态" width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status===0">未确定</span>
                        <span v-else-if="scope.row.status===1">已确认</span>
                        <span v-else-if="scope.row.status===3">无效</span>
                        <span v-else-if="scope.row.status===10">已完成</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>-->
                <el-table-column align="center" label="退单时间" width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.addTime}}</span>
                    </template>
                </el-table-column>
                <!--<el-table-column align="center" label="操作" width="80" fixed="right" v-if="rightsButtons['detail']">
                    <template slot-scope="scope">
                        <router-link :to="`/order/refund/detail/${scope.row.id}`">
                            <el-button type="primary" size="mini" plain>查看</el-button>
                        </router-link>
                    </template>
                </el-table-column>-->
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>
<script>
  import searchForm from '../../../components/searchForm/index'
  export default {
    name: 'refund',
    components: {
      searchForm
    },
    data(){
      return {
        listQuery: {
          refundNo: '',
          beginTime: '',
          endTime: '',

          createDate: [],
          pageIndex: 1,
          pageSize: 20
        },
        queryConfig: [
          {
            prop: 'refundNo',
            type: 'input',
            label: '退单号'
          },
          {
            prop: 'createDate',
            type: 'daterange',
            label: '退单时间'
          }
        ],
        listLoading: false,
        listTotal: 0,
        list: [],
        paginationShow: false
      }
    },
    created(){
      this.getList();
    },
    methods: {
      getList(){
        this.listLoading = true;
        this.listQuery.currentPage = this.listQuery.pageIndex-1;
        if(this.listQuery.createDate.length){
          this.listQuery.beginTime = this.listQuery.createDate[0]+' 00:00:00';
          this.listQuery.endTime = this.listQuery.createDate[1]+' 23:59:59';
        } else {
          this.listQuery.beginTime = '';
          this.listQuery.endTime = '';
        }
        this.request({
          url: '/bsnl-refund/refund/queryRecord',
          method: 'post',
          data: this.listQuery
        }).then(({data}) => {
          this.list = data.content;
          this.listTotal = data.totalElements;
          this.listLoading = false;
        }).catch(err => {
          console.log(err);
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
      },
      search () {
        this.listQuery.pageIndex = 1
        this.getList()
      },
      handleSizeChange (value) {
        this.listQuery.pageSize = value
        this.getList()
      },
      handleCurrentChange (value) {
        this.listQuery.pageIndex = value
        this.getList()
      }
    }
  }
</script>
